<template>
    <div class="category">
        <div class="product_list" v-for=" item in categoryList" :key="item.id">
            <h4>{{item.name}}</h4>
            <ul>
                <li v-for="subItem in item.goodsList" :key="subItem.id">
                    <img :src="subItem.list_pic_url" alt="">
                    <div class="title">{{subItem.name}}</div>
                    <div class="price">{{subItem.retail_price | RMBformat}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            brandDetail(id) {
                this.$router.push('/brand?id=' + id)
            }
        },
        props: ["categoryList"]
    }
</script>

<style lang="less" scoped>
    .category {
        .product_list {
            background: #fff;
            padding-top: 18px;

            h4 {
                text-align: center;
                height: 50px;
                line-height: 50px;
                font-size: 20px;
            }

            ul {
                width: 100%;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                li {
                    float: left;
                    width: 49%;
                    margin-bottom: 10px;
                    background: #fff;
                    text-align: center;

                    img {
                        width: 100%;
                    }

                    .title {
                        width: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .price {
                        line-height: 40px;
                        color: #8b0000;
                    }
                }
            }
        }
    }
</style>